<template>
    <!-- 自定义 动态增删 tabs 搭配 menu -->
    <div>
        <el-tabs
            v-model="activeIndex"
            type="card"
            @tab-remove="removeTab"
            @tab-click="clickTab"
        >
            <el-tab-pane
                :key="item.name"
                v-for="item in openTab"
                :label="item.title"
                :name="item.name"
                :closable="item.closable"
            >
                <router-view></router-view>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import 'vuex';

import guide from '@/views/Guide/guide.vue';

export default {
    name: 'MenuTabs',
    components: { guide },
    data() {
        return {
            activeIndex: '/guide',
            openTab: [
                {
                    title: '引导页',
                    name: '/guide',
                    closable: false
                }
            ]
        };
    },
    computed: {},
    watch: {
        $route(to, form) {
            var flag = false;
            // 当前页面菜单已打开
            for (let i = 0; i < this.openTab.length; i++) {
                if (to.path == this.openTab[i].name) {
                    this.activeIndex = this.openTab[i].name;
                    flag = true;
                    break;
                }
            }
            // 打开新的页面
            if (!flag) {
                if (!to.meta.title) {
                    to.meta.title = '一键搜';
                }
                console.log(to.meta);
                let obj = {
                    title: to.meta.title,
                    name: to.path,
                    closable: true
                };
                this.activeIndex = to.path;
                this.openTab.push(obj);
            }
        }
    },
    created() {
        const sessionTab = JSON.parse(window.sessionStorage.getItem('openTab')) || '';
        if (sessionTab) {
            if (sessionTab.openTab.length != 0 && sessionTab.openTabPath.length != 0) {
                for (let i = 0; i < sessionTab.openTab.length; i++) {
                    this.openTab.push({
                        title: sessionTab.openTab[i].title,
                        name: sessionTab.openTab[i].name,
                        closable: true
                    });
                }
                this.activeIndex = sessionTab.currActiveTabs;
                this.$router.push({ path: this.activeIndex });
            }
        }
    },
    mounted() {
        // 监听页面加载前
        window.addEventListener('beforeunload', e => {
            sessionStorage.setItem(
                'openTab',
                JSON.stringify({
                    openTab: this.openTab.filter(
                        item => item.name != '/guide'
                    ),
                    openTabPath: this.openTab.filter(
                        item => item.name !== '/guide'
                    ),
                    currActiveTabs: this.activeIndex
                })
            );
        });
    },
    methods: {
        clickTab(tab) {
            this.activeIndex = tab.paneName;
            this.$router.push({ path: this.activeIndex });
        },
        removeTab(target) {
            // 删除的是当前选中的页面
            if (this.activeIndex === target) {
                this.openTab.forEach((item, index) => {
                    if (item.name == target) {
                        let nextTab = item[index + 1] || item[index - 1];
                        if (nextTab) {
                            this.activeIndex = nextTab.name;
                        }
                    }
                });
            }
            var i = 0;
            this.openTab.forEach((item, index) => {
                if (item.name == target) {
                    // eslint-disable-next-line no-return-assign
                    return (i = index);
                }
            });
            this.openTab.splice(i, 1);

            // 更新路由
            this.$router.push({ path: this.openTab[this.openTab.length - 1].name });
        }
    }
};
</script>

<style lang="less" scoped></style>
